<template>
    <div class="relative flex-center wh-full" :style="{ backgroundColor: bgColor }">
        <dark-mode-switch
            :dark="theme.darkMode"
            class="absolute left-48px top-24px z-3 text-20px"
            @update:dark="theme.setDarkMode"
        />
        <n-card
            :bordered="false"
            size="large"
            class="z-4 rounded-20px shadow-sm"
            :style="{ width: formWidth }"
        >
            <div class="">
                <header class="flex-center">
                    <!--                                        <img src="@/assets/logo.png" alt="">-->
                    <n-gradient-text type="primary" :size="28">{{
                        appName
                    }}</n-gradient-text>
                </header>
                <main>
                    <div class="pt-24px">
                        <transition name="fade-slide" mode="out-in" appear>
                            <component :is="activeModule.component" />
                        </transition>
                    </div>
                </main>
            </div>
        </n-card>
        <login-bg :theme-color="bgThemeColor" />
        <copyright></copyright>
    </div>
</template>

<script setup lang="ts">
import { type Component, computed, type ComputedRef } from 'vue'
import { loginModuleLabels } from '@/constants'
import { useThemeStore } from '@/store'
import { getColorPalette, mixColor } from '@/utils'
import { LoginBg, PwdLogin } from '../index'
import copyright from '../copyright/index.vue'
import { getServiceEnvConfig } from '~/.env-config'

const { loginPage } = getServiceEnvConfig(import.meta.env)

const appName = loginPage?.title
const formWidth: ComputedRef<string> = computed(() => {
    const loginWidth = loginPage?.formWidth

    let width = ''
    width = isNaN(Number(loginWidth)) ? `${loginWidth}` : `${loginWidth}px`

    return width
})

// const props = defineProps<Props>()

const theme = useThemeStore()

interface LoginModule {
    key: UnionKey.LoginModule
    label: string
    component: Component
}

const modules: LoginModule[] = [
    {
        key: 'pwd-login',
        label: loginModuleLabels['pwd-login'],
        component: PwdLogin
    }
]

const activeModule = computed(() => {
    const active: LoginModule = { ...modules[0] }
    const findItem = modules.find((item) => item.key === 'pwd-login')
    if (findItem) {
        Object.assign(active, findItem)
    }
    return active
})

const bgThemeColor = computed(() =>
    theme.darkMode ? getColorPalette(theme.themeColor, 7) : theme.themeColor
)

const bgColor = computed(() => {
    const COLOR_WHITE = '#ffffff'
    const ratio = theme.darkMode ? 0.5 : 0.2
    return mixColor(COLOR_WHITE, theme.themeColor, ratio)
})
</script>

<style scoped></style>
